<template>
  <div class="main-container">
    <div class="top">
      <img
        @click="toSystem"
        src="/static/main-nav/title.png"
        class="h-[62px] w-[267px]"
      />
      <div class="main-title">Digital Intelligence Center</div>
    </div>
    <div class="bottom">
      <div class="system-items">
        <div
          :class="['item', active === '1' ? 'active' : '']"
          @click="active = '1'"
        >
          <img src="/static/main-nav/digital-center.png" />
          <span>数智中心</span>
        </div>
        <div
          :class="['item', active === '2' ? 'active' : '']"
          @click="active = '2'"
        >
          <img src="/static/main-nav/net-center.png" />
          <span>站网平台</span>
        </div>
        <div
          :class="['item', active === '3' ? 'active' : '']"
          @click="active = '3'"
        >
          <img src="/static/main-nav/server.png" />
          <span>服务器平台</span>
        </div>
        <div
          :class="['item', active === '4' ? 'active' : '']"
          @click="active = '4'"
        >
          <img src="/static/main-nav/output-service.png" />
          <span>产出服务平台</span>
        </div>
        <div
          :class="['item', active === '5' ? 'active' : '']"
          @click="active = '6'"
        >
          <img src="/static/main-nav/terminal.png" />
          <span>终端备案平台</span>
        </div>
        <div
          :class="['item', active === '6' ? 'active' : '']"
          @click="active = '6'"
        >
          <img src="/static/main-nav/industry-services.png" />
          <span>行业服务平台</span>
        </div>
        <div
          :class="['item', active === '7' ? 'active' : '']"
          @click="active = '7'"
        >
          <img src="/static/main-nav/system-manage.png" />
          <span>系统管理平台</span>
        </div>
      </div>
      <div class="goto">
        <div class="system-img">
          <img src="/static/main-nav/system-img.png" />
        </div>
        <img
          @click="toSystem"
          src="/static/main-nav/goto.png"
          class="h-[36px] w-[114px]"
        />
      </div>
    </div>
  </div>
</template>
<route lang="json">
{
  "name": "main-nav",
  "meta": {
    "layout": false,
    "requireAuth": false,
    "hideInTabs": true
  }
}
</route>
<script setup lang="tsx">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const active = ref('0');

const router = useRouter();

const toSystem = () => {
  switch (active.value) {
    case '0':
      message.warning('请选择要进入的系统');
      break;
    case '1':
      message.warning('开发中');
      break;
    case '2':
      message.warning('开发中');
      break;
    case '3':
      router.push('/server/dashboard');
      break;
    case '4':
      message.warning('开发中');
      break;
    case '5':
      message.warning('开发中');
      break;
    case '6':
      message.warning('开发中');
      break;
    case '7':
      router.push('/system');
      break;
    default:
      message.warning('请选择要进入的系统');
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url('/static/main-nav/main-bg.png');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .top {
    width: 100vw;
    height: 13.594vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5vw;

    .main-title {
      font-weight: 400;
      font-size: 22px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 2px;
      text-align: left;
    }
  }

  .bottom {
    width: 100vw;
    flex: 1;
    display: flex;

    .system-items {
      padding-left: 5vw;
      height: fit-content;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      .item {
        width: 15.625vw;
        height: 4.688vw;
        background: url('/static/main-nav/item-bg.png') no-repeat;
        background-size: 100% 100%;
        border-radius: 2.344vw;
        display: flex;
        align-items: center;
        margin: 1.719vw 3.7vw 1.719vw 0;
        img {
          width: 4.688vw;
          height: 4.688vw;
          margin-left: 1.5vw;
        }
        span {
          font-weight: bold;
          font-size: 1.146vw;
          color: #ffffff;
          margin-left: 1vw;
        }

        &.active {
          background: url('/static/main-nav/item-active-bg.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .goto {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      .system-img {
        width: 45.833vw;
        height: 32.5vw;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          margin-right: 3.281vw;
        }
      }
    }
  }
}
</style>
